<template>
  <div>
    <Card>
      <div class="apply-container">
        <Row>
          <!-- 左侧：审批详情 -->
          <i-col span="16" class="apply-container-left">
            <div class="apply-container-left-title">
              <span class="showSmallPhoto">
                <!-- <img :src="applyInfo.employeeName" /> -->
              </span>
              <b>{{applyInfo.employeeIdAndName}}</b>&nbsp;&nbsp;|&nbsp;
              <b>{{applyInfo.applyType}}</b>
              <Tag :color="applyInfo.color" style="margin-left:10px;">{{applyInfo.status}}</Tag>
            </div>
            <div>
              <!-- 请假详情 -->
              <div v-if="applyInfo.applyType == '请假'" class="applyDetails">
                <Row>
                  <i-col span="3" style="color:#888">审批编号</i-col>
                  <i-col span="20">{{applyInfo.applyNo}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">所在机构</i-col>
                  <i-col span="20">{{applyInfo.companyIdAndName}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">角色</i-col>
                  <i-col span="20">{{applyInfo.role}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">请假类型</i-col>
                  <i-col span="20">{{applyInfo.detail}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">开始时间</i-col>
                  <i-col span="20">{{applyInfo.startTime}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">结束时间</i-col>
                  <i-col span="20">{{applyInfo.endTime}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">请假时长</i-col>
                  <i-col span="20">{{applyInfo.duration}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">请假事由</i-col>
                  <i-col span="20" style="width:500px" class="textWrap">{{applyInfo.reason}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">说明附件</i-col>
                  <i-col span="20">
                    <div v-for="(item,index) in fileList" :key="index" style="display:inline-block;margin:0 20px 13px 0">
                      <!-- <i-col span="20" v-if="index == 0">
                        <div class="download-file" @click="downloadFile(item.id)">
                          <div class="download-file-icon">
                            <Icon type="md-document" size="32" />
                          </div>
                          <div class="download-file-info">
                            <div class="download-file-info-title">{{item.fileName}}</div>
                            <div class="download-file-info-1">{{item.fileSize}}</div>
                          </div>
                        </div>
                      </i-col> -->
                      <i-col span="20">
                        <div class="download-file" @click="downloadFile(item.id)">
                          <div class="download-file-icon">
                            <Icon type="md-document" size="32" />
                          </div>
                          <div class="download-file-info">
                            <div class="download-file-info-title">{{item.fileName}}</div>
                            <div class="download-file-info-1">{{item.fileSize}}</div>
                          </div>
                        </div>
                      </i-col>
                    </div>
                  </i-col>
                </Row>
              </div>
              <!-- 补卡详情 -->
              <div v-if="applyInfo.applyType == '补卡'" class="applyDetails">
                <Row>
                  <i-col span="3" style="color:#888">审批编号</i-col>
                  <i-col span="20">{{applyInfo.applyNo}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">所在机构</i-col>
                  <i-col span="20">{{applyInfo.companyIdAndName}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">角色</i-col>
                  <i-col span="20">{{applyInfo.role}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">补卡类型</i-col>
                  <i-col span="20">{{applyInfo.detail}}</i-col>
                </Row>
                <Row v-if="applyInfo.cardTime1 != ''">
                  <i-col span="3" style="color:#888">上班补卡</i-col>
                  <i-col span="20">{{applyInfo.cardTime1}}</i-col>
                </Row>
                <Row v-if="applyInfo.cardTime2 != ''">
                  <i-col span="3" style="color:#888">下班补卡</i-col>
                  <i-col span="20">{{applyInfo.cardTime2}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">补卡事由</i-col>
                  <i-col span="20" style="width:500px" class="textWrap">{{applyInfo.reason}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">说明附件</i-col>
                  <i-col span="20">
                    <div v-for="(item,index) in fileList" :key="index" style="display:inline-block;margin:0 20px 13px 0">
                      <!-- <i-col span="20" v-if="index == 0">
                        <div class="download-file" @click="downloadFile(item.id)">
                          <div class="download-file-icon">
                            <Icon type="md-document" size="32" />
                          </div>
                          <div class="download-file-info">
                            <div class="download-file-info-title">{{item.fileName}}</div>
                            <div class="download-file-info-1">{{item.fileSize}}</div>
                          </div>
                        </div>
                      </i-col> -->
                      <i-col span="20">
                        <div class="download-file" @click="downloadFile(item.id)">
                          <div class="download-file-icon">
                            <Icon type="md-document" size="32" />
                          </div>
                          <div class="download-file-info">
                            <div class="download-file-info-title">{{item.fileName}}</div>
                            <div class="download-file-info-1">{{item.fileSize}}</div>
                          </div>
                        </div>
                      </i-col>
                    </div>
                  </i-col>
                </Row>
              </div>
              <!-- 外出详情 -->
              <div v-if="applyInfo.applyType == '外出'" class="applyDetails">
                <Row>
                  <i-col span="3" style="color:#888">审批编号</i-col>
                  <i-col span="20">{{applyInfo.applyNo}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">所在机构</i-col>
                  <i-col span="20">{{applyInfo.companyIdAndName}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">角色</i-col>
                  <i-col span="20">{{applyInfo.role}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">外出类型</i-col>
                  <i-col span="20">{{applyInfo.detail}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">外出地点</i-col>
                  <i-col span="20">{{applyInfo.places}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">开始时间</i-col>
                  <i-col span="20">{{(applyInfo.startTime).substring(0,16)}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">结束时间</i-col>
                  <i-col span="20">{{(applyInfo.endTime).substring(0,16)}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">外出时长</i-col>
                  <i-col span="20">{{applyInfo.duration}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">外出事由</i-col>
                  <i-col span="20" style="width:500px" class="textWrap">{{applyInfo.reason}}</i-col>
                </Row>
                <Row>
                  <i-col span="3" style="color:#888">说明附件</i-col>
                  <i-col span="20">
                    <div v-for="(item,index) in fileList" :key="index" style="display:inline-block;margin:0 20px 13px 0">
                      <!-- <i-col span="20" v-if="index == 0">
                        <div class="download-file" @click="downloadFile(item.id)">
                          <div class="download-file-icon">
                            <Icon type="md-document" size="32" />
                          </div>
                          <div class="download-file-info">
                            <div class="download-file-info-title">{{item.fileName}}</div>
                            <div class="download-file-info-1">{{item.fileSize}}</div>
                          </div>
                        </div>
                      </i-col> -->
                      <i-col span="20">
                        <div class="download-file" @click="downloadFile(item.id)">
                          <div class="download-file-icon">
                            <Icon type="md-document" size="32" />
                          </div>
                          <div class="download-file-info">
                            <div class="download-file-info-title">{{item.fileName}}</div>
                            <div class="download-file-info-1">{{item.fileSize}}</div>
                          </div>
                        </div>
                      </i-col>
                    </div>
                  </i-col>
                </Row>
              </div>
            </div>
            <div style="margin-top:20px" v-if="afterSubmit">
              <Row v-if="applyInfo.status == '审批中'">
                <i-col>
                  <Input
                    class="approval-textarea"
                    v-model="approvalOpinion"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入审批意见(非必填)"
                  />
                </i-col>
              </Row>
              <Row v-if="applyInfo.status == '审批中'">
                <i-col span="3">
                  <Button
                    type="primary"
                    @click="approvalSubmit('success')"
                    :loading="successLoading"
                    class="buttonStyle"
                  >同意</Button>
                </i-col>
                <i-col span="20">
                  <Button
                    type="default"
                    @click="approvalSubmit('failure')"
                    :loading="failureLoading"
                    class="buttonStyle"
                  >驳回</Button>
                </i-col>
              </Row>
            </div>
          </i-col>

          <!-- 右侧：审批流程 -->
          <i-col span="8" class="apply-container-right">
            <div class="submit-success">
              <div class="submit-success-content">
                <div class="submit-success-content-title">审批流程</div>
                <div>
                  <Timeline>
                    <TimelineItem
                      :color="passedColor"
                      v-for="(item,index) in timeLine1"
                      :key="index"
                    >
                      <Icon
                        class="grayDiv"
                        style="background-color: rgba(24, 144, 255, 1)"
                        v-if="index < applyInfo.grade-tit+1"
                        slot="dot"
                        size="24"
                      ></Icon>
                      <Icon
                        class="grayDiv"
                        style="background-color: rgba(128, 128, 128, 1);"
                        v-else
                        slot="dot"
                        size="24"
                      ></Icon>
                      <div class="timeline-box">
                        <Row>
                          <i-col span="10">
                            <div class="timeline-item-title">{{item.title}}</div>
                            <div class="timeline-item-content">{{item.sum}}</div>
                          </i-col>
                          <i-col span="14" v-if="item.people">
                            <div
                              v-for="(people,index) in item.people"
                              :key="index"
                              style="float:right"
                            >
                              <div>
                                <span class="showSmallPhoto">
                                  <!-- <img :src="people.icon" /> -->
                                </span>
                              </div>
                              <div
                                style="text-align:center"
                                class="timeline-item-content"
                              >{{people.name}}</div>
                            </div>
                          </i-col>
                        </Row>
                      </div>
                    </TimelineItem>
                  </Timeline>
                </div>
              </div>
            </div>
            <!-- 操作日志 -->
            <div>
              <div class="submit-success">
                <div class="submit-success-content">
                  <div class="submit-success-content-title">操作日志</div>
                  <div>
                    <Timeline>
                      <TimelineItem
                        :color="passedColor"
                        v-for="(item,index) in timeLine2"
                        :key="index"
                      >
                        <Icon type="md-radio-button-off" slot="dot" size="24"></Icon>
                        <div>{{item.approvalTime}}</div>
                        <div>{{item.operation}}</div>
                        <div v-if="item.opinion">
                          <span class="more-opinion">意见:</span>
                          {{item.opinion}}
                        </div>
                      </TimelineItem>
                    </Timeline>
                  </div>
                </div>
              </div>
            </div>
          </i-col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
import {exportFile} from "../../../util/util"
export default {
  props: {},
  data() {
    return {
      agentCheckList: [],
      applyInfo: "",
      timeLine1: [],
      timeLine2: [],
      item1: this.$route.query.item,
      afterSubmit: true,
      approvalOpinion: "",
      tit: "",
      fileList: [],
      successLoading: false,
      failureLoading: false,
      ismaxgrade:'',//Y-最后一位审批人
    };
  },
  methods: {
    backBtn() {
      this.$router.go(-1);
    },

    // 页面获取详细信息
    applyDataQuery() {
      let obj = {
        applyNo: this.item1.applyNo,
        applyStatus: this.item1.status
      };
      this.api.getApplyInfo(obj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.ismaxgrade = res.data.ismaxgrade
          console.log(this.ismaxgrade,'lastone');
          this.agentCheckList = []
          for(let i=1;i<res.data.userFewVOS.length;i++){
            if(res.data.userFewVOS[i].people){
              for(let j=0;j<res.data.userFewVOS[i].people.length;j++){
                this.agentCheckList.push(res.data.userFewVOS[i].people[j].agentcode)
              }                
            }
          }
          // 详细信息
          this.applyInfo = res.data;
          if (res.data.uerAttachment) {
            this.fileList = res.data.uerAttachment;
          }
          this.applyInfo.color =
            this.applyInfo.status == "审批中" ? "warning" : "default";
          if (this.applyInfo.detail.match("上班打卡异常")) {
            this.applyInfo.cardTime1 = this.applyInfo.clockTime.substr(7, 10);
            this.applyInfo.cardTime2 = "";
          } else if (this.applyInfo.detail.match("上下班打卡异常")) {
            this.applyInfo.cardTime1 = this.applyInfo.clockTime.substr(7, 10);
            this.applyInfo.cardTime2 = this.applyInfo.clockTime.substr(32, 10);
          } else if (this.applyInfo.detail.match("下班打卡异常")) {
            this.applyInfo.cardTime1 = "";
            this.applyInfo.cardTime2 = this.applyInfo.clockTime.substr(7, 10);
          }
          // 审批流程
          if (res.data.userFewVOS.length > 0) {
            this.timeLine1 = res.data.userFewVOS;
            console.log(this.timeLine1)
            let title = res.data.userFewVOS[0].title;
            if (title == "外勤") {
              this.tit = 1;
            } else if (title == "外勤主管") {
              this.tit = 2;
            } else if (title == "外勤部经理") {
              this.tit = 3;
            } else if (title == "支公司内勤") {
              this.tit = 4;
            } else if (title == "分公司内勤") {
              this.tit = 5;
            } else if (title == "总公司内勤") {
              this.tit = 6;
            }
          } else {
            this.timeLine1 = [];
          }
          // 操作日志
          if (res.data.uerApprovalInfoVOS.length > 0) {
            this.timeLine2 = res.data.uerApprovalInfoVOS;
          } else {
            this.timeLine2 = [];
          }
        } else {
          this.$Message.error(res.msg);
        }
      });
    },

    // 是否同意表单通过
    approvalSubmit(whether) {
      let obj = {
        applyNo: this.applyInfo.applyNo,
        approvalNo: "1",
        opinion: this.approvalOpinion
      };
      //驳回
      if (whether == "failure") {
        this.failureLoading = true;
        this.api.ApprovalFaile(obj).then(res => {
          if (res.code == 200 && res.data != null) {
            this.failureLoading = false;
            this.$Message.warning(res.msg);
            this.afterSubmit = false;
            this.applyDataQuery();
            //20201215
            console.log(this.agentCheckList)
            sessionStorage.getItem("useragentcode")
            // console.log(this.applyInfo.employeeIdAndName,this.applyInfo.employeeIdAndName.split("-")[1])
            // return
            this.api.sendNotice({
              agentcode: this.applyInfo.employeeIdAndName.split("-")[0], //截取员工号
              messageid:obj.applyNo,
              messagetype:'5'
            }).then(res => {
              console.log(res)
            })
            //审批最后一级
              this.api.pushOneUser({
                agentCode: this.applyInfo.employeeIdAndName.split("-")[0],
                // id: this.infoList.id,
                templateType: this.applyInfo.applyType=="外出" ? '3' : (this.applyInfo.applyType=="补卡" ? '4' : '5'),
                id: obj.applyNo,
              }).then(res => {
                console.log(res)
              }) 
          } else {
            this.failureLoading = false;
            this.$Message.error(res.msg);
          }
        });
      }
      //同意
      if (whether == "success") {
        this.successLoading = true;
        this.api.ApprovalSuccess(obj).then(res => {
          if (res.code == 200 && res.data != null) {
            this.successLoading = false;
            this.$Message.success(res.msg);
            this.afterSubmit = false;
            this.applyDataQuery();
            //20201215
            console.log(this.agentCheckList)
            sessionStorage.getItem("useragentcode")
            let n = 0
            for(let i = 0;i<this.agentCheckList.length;i++){
              if(this.agentCheckList[i] == sessionStorage.getItem("useragentcode")){
                n = (i == (this.agentCheckList.length-1)) ? 999 : (i+1)
              } 
            }
            let code = n==999 ? this.applyInfo.employeeIdAndName.split("-")[0] : this.agentCheckList[n] 
            
            this.api.sendNotice({
              agentcode: code, //还没加，待联调
              messageid:obj.applyNo,
              messagetype:'6'
            }).then(res => {
              console.log(res)
            })
            //审批最后一级
            if(this.ismaxgrade == 'Y'){
              this.api.pushOneUser({
                agentCode: this.applyInfo.employeeIdAndName.split("-")[0],
                templateType: this.applyInfo.applyType=="外出" ? '3' : (this.applyInfo.applyType=="补卡" ? '4' : '5'),
                id: obj.applyNo,
              }).then(res => {
                console.log(res)
              })            
            }else{
              this.api.pushOneUser({
                agentCode: code,
                // id: this.infoList.id,
                templateType: '7',
                id: obj.applyNo,
                approveType: this.applyInfo.applyType=="外出" ? '1' : (this.applyInfo.applyType=="补卡" ? '2' : '3')
              }).then(res => {
                console.log(res)
              }) 
            }

          } else {
            this.successLoading = false;
            this.$Message.error(res.msg);
          }
        });
      }
    },

    // 下载申请详情文件
    downloadFile(id) {
      let obj = {
        id: id
      };
      // let url = "../rest/fileDownload/download";
      // window.open(url + "?id=" + obj.id);
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/download",obj)
    }
  },
  watch: {},
  mounted() {
    // 页面获取详细信息
    this.applyDataQuery();
  },
  computed: {},
  created() {},
  beforeDestroy() {
    this.agentCheckList = null;
    this.applyInfo = null;
    this.timeLine1 = null;
    this.timeLine2 = null;
    this.item1 = null;
    this.afterSubmit = null;
    this.approvalOpinion = null;
    this.tit = null;
    this.fileList = null;
    this.successLoading = null;
    this.failureLoading = null;
  },
};
</script>

<style lang="less" scoped>
@import "./index";
</style>

